<template>
<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，项目使用请保留此说明
-->
<view :class="'flex text-center '+(customClass)" style="width:230rpx">
  <view class="flex-sub">
    <button class="cu-btn cuIcon-move sm st-num-bt" :disabled="stNumClone <= min" @tap="stNumMinus"></button>
  </view>
  <view class="flex-sub">
    <input type="number" class="st-num text-center bg-gray radius" :value="stNumClone" :disabled="true" @input="numChange"/>
  </view>
  <view class="flex-sub">
    <button class="cu-btn cuIcon-add sm st-num-bt" :disabled="max >= 0 ? stNumClone >= max : false" @tap="stNumAdd"></button>
  </view>
</view>
</template>

<script>
/**
 * Copyright (C) 2018-2019
 * All rights reserved, Designed By www.joolun.com
 * 注意：
 * 本软件为www.joolun.com开发研制，项目使用请保留此说明
 */
export default {
                    data() {
return {};
}, 
props: {
  max: {
    type: Number,
    default: 0
  },
  min: {
    type: Number,
    default: 0
  },
  stNum: {
    type: Number,
    default: 0
  },
  customClass: {
    type: String,
    default: ''
  }
}, 
methods: {
  stNumMinus() {
    this.setData({
      stNumClone: this.data.stNum - 1
    });
    this.$emit('numChange', {
      detail: this.data.stNum
    });
  },

  stNumAdd() {
    this.setData({
      stNumClone: this.data.stNum + 1
    });
    this.$emit('numChange', {
      detail: this.data.stNum
    });
  },

  numChange(e) {
    this.$emit('numChange', {
      detail: val
    });
  }

},
                    watch:{
                      stNum: {
                        handler: function(newVal, oldVal) {
                          this.stNumClone = newVal;
                        },

                        immediate: true
                      }
                    }
                };
</script>
<style >

.st-num{
  width: 80rpx;
  height: 50rpx;
}
.st-num-bt{
  line-height: 50rpx;
  overflow: hidden;
  font-size: 30rpx!important;
  height: 50rpx!important
}
</style>